{% extends "base.html" %}

{% block greybox %}
{% endblock %}

{% block formJs %}
<script type="text/javascript" src="/js/form.js"></script>
{% endblock %}

{% block js %}

/**
 * load 時に表示する Map
 */
function loadMain() {
    if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("mainMap"));
        var latlng = new GLatLng({{ result.lon }}, {{ result.lat }});
        map.setCenter(latlng, 13);
        //map.addControl(new GMapTypeControl());
        map.addControl(new GSmallMapControl());        
        
        var marker = new GMarker(latlng);
        map.addOverlay(marker);
        $('#contact-lat').val({{ result.lat }});
        $('#contact-lon').val({{ result.lon }});
        
        GEvent.addListener(map, "move", function() {
            marker.setPoint(map.getCenter());
            showLatLon();
        });
        
        showLatLon = function(){
            point = map.getCenter()
            $('#contact-lat').val(point.x);
            $('#contact-lon').val(point.y);
        };
    }
}

window.addEventListener('load', loadMain, false);

/**
 * Post form data
 */
function postForm() {
    $.ajax({
        url : '/update',
        data : {
            key : '{{ result.key }}',
            title : $('#contact-title').val(),
            published : $('#contact-published').val(),
            lon : $('#contact-lon').val(),
            lat : $('#contact-lat').val(),
            memo : $('#contact-memo').val()
        },
        type : 'post',
        dataType : 'jsonp',
        complete : function(){
            parent.parent.location.reload();
            parent.parent.GB_hide();
        }
    });
}

{% endblock %}

{% block header %}
{% endblock %}

{% block body %}

<div id="content">
  
    <p>* は必須項目です。</p>
  
    <div id="edit-container">
        <table id="edit" class="contact-content" summary="editForm">
            <tr>
                <td class="label" for="title">*タイトル:</td>
                <td><input type="text" id="contact-title" class="contact-input" name="title" tabindex="1001" value="{{ result.title }}"/></td>
            </tr>
            <tr>
                <td class="label" for="published">公開する:</td>
                <td>
                {% if result.published %}
                    <input type="checkbox" id="contact-published"  name="published" tabindex="1002" checked />
		        {% else %}
                    <input type="checkbox" id="contact-published" name="published" tabindex="1002" />
		        {% endif %}
		        </td>
		    </tr>
            <tr>
                <td class="label" for="lon">*経度:</td>
                <td><input type="text" id="contact-lon" class="contact-input" name="lon" value="{{ reuslt.lon }}" tabindex="1003" /></td>
            </tr>
            <tr>
                <td class="label" for="lat">*緯度:</td>
                <td><input type="text" id="contact-lat" class="contact-input" name="lat" value="{{ result.lat }}" tabindex="1004" /></td>
            </tr>
            <tr>
                <td for="gmaps">&nbsp;</td>
                <td><div id="mainMap" style="width: 400px; height: 250px;">&nbsp;</div></td>
            </tr>
            <tr>
                <td class="label" for="message">メモ:</td>
                <td><textarea id="contact-memo" class="contact-input" name="memo" cols="40" rows="2" tabindex="1005">{{ result.memo }}</textarea></td>
            </tr>
        </table>
            
        <div style="margin-left:100px;">
            <input type="submit" id="regist" value="更新" tabindex="1006" />
        </div>
    </div>
</div>

{% endblock %}

{% block footer %}
{% endblock %}